<template>
	<div class="system-user-container">
		<el-card class="box-card">
			<div>
				<div class="my_btn_lay">
					<div class="my_flex my_btn" @click="searchEvent">
						<div class="my_flex_layout">
							<i class="vxe-icon--search"></i>
							<span>查找</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="resetEvent">
						<div class="my_flex_layout">
							<i class="vxe-icon--refresh"></i>
							<span>重置</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="addDefaultBlank">
						<div class="my_flex_layout">
							<i class="vxe-icon--plus"></i>
							<span>新增</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="deleteTable">
						<div class="my_flex_layout">
							<i class="fa fa-trash-o"></i>
							<span>删除</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="uploadingbutton_ADD">
						<div class="my_flex_layout">
							<i class="vxe-icon--upload"></i>
							<span>导入</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="funnelEvent">
						<div class="my_flex_layout">
							<i class="vxe-icon--download"></i>
							<span>导出</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="printTab">
						<div class="my_flex_layout">
							<i class="vxe-icon--print"></i>
							<span>打印</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="showEngineeringType">
						<div class="my_flex_layout">
							<i class="vxe-icon--edit-outline"></i>
							<span>工程类别</span>
						</div>
					</div>
					<div class="my_flex my_btn ml20" @click="showAmendFun">
						<div class="my_flex_layout">
							<i class="el-icon-edit"></i>
							<span>编辑</span>
						</div>
					</div>
					<div class="my_flex my_btn ml20" @click="editClosedEvent">
						<div class="my_flex_layout">
							<i class="el-icon-folder-add"></i>
							<span>保存</span>
						</div>
					</div>
				</div>

				<vxe-form :data="selectFrom" title-align="left" prevent-submit title-colon>
					<vxe-form-item title="开始时间" field="time" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="data.time1" type="date" placeholder="开始时间"> </el-date-picker>
						</template>
					</vxe-form-item>

					<vxe-form-item title="合同单位" field="contractUnitId" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-select style="width: 100%" clearable filterable v-model="data.contractUnitId" placeholder="请选择合同单位">
								<el-option v-for="item in selectFrom.unitsData" :key="item.id" :label="item.unitName" :value="item.id"> </el-option>
							</el-select>
						</template>
					</vxe-form-item>

					<vxe-form-item title="工程类别" field="engineeringTypeId" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-select style="width: 100%" clearable filterable v-model="data.engineeringTypeId" placeholder="请选择工程类别">
								<el-option v-for="item in selectFrom.engineeringTypeIdData" :key="item.id" :label="item.type" :value="item.id"> </el-option>
							</el-select>
						</template>
					</vxe-form-item>

					<vxe-form-item title="合作方" field="partnerId" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-select style="width: 100%" clearable filterable v-model="data.partnerId" placeholder="请选择合作方">
								<el-option v-for="item in selectFrom.hezuofang" :key="item.id" :label="item.unitName" :value="item.id"> </el-option>
							</el-select>
						</template>
					</vxe-form-item>

					<vxe-form-item title="市场部员工" field="marketEmployeeId" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-select style="width: 100%" clearable filterable v-model="data.marketEmployeeId" placeholder="请选择市场部员工">
								<el-option v-for="item in selectFrom.projectManagerData" :key="item.id" :label="item.contactPerson" :value="item.id"> </el-option>
							</el-select>
						</template>
					</vxe-form-item>

					<vxe-form-item title="状态" field="state" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-select style="width: 100%" clearable filterable v-model="data.state" placeholder="请选择状态">
								<el-option v-for="item in selectFrom.stateData" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</template>
					</vxe-form-item>

					<vxe-form-item title="结束时间" field="time" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="data.time2" type="date" placeholder="结束日期"> </el-date-picker>
						</template>
					</vxe-form-item>

					<vxe-form-item title="合同名称" field="contractId" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-select style="width: 100%" clearable filterable v-model="data.contractId" placeholder="请选择合同名称">
								<el-option v-for="item in selectFrom.projectData" :key="item.id" :label="item.contractName" :value="item.id"> </el-option>
							</el-select>
						</template>
					</vxe-form-item>
					<vxe-form-item title="工程名称" field="contractName" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-input clearable v-model="data.contractName" placeholder="请输入工程名称" />
						</template>
					</vxe-form-item>

					<vxe-form-item title="项目经理" field="projectManagerId" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-select style="width: 100%" clearable filterable v-model="data.projectManagerId" placeholder="请选择项目经理">
								<el-option v-for="item in selectFrom.projectManagerData" :key="item.id" :label="item.contactPerson" :value="item.id"> </el-option>
							</el-select>
						</template>
					</vxe-form-item>

					<vxe-form-item title="是否注销 " field="logout" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-select style="width: 100%" clearable filterable v-model="data.logout" placeholder="是否注销">
								<el-option v-for="item in selectFrom.logoutData" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</template>
					</vxe-form-item>

					<vxe-form-item title="备注" field="contractUnitId" span="4" :item-render="{}">
						<template #default="{ data }">
							<el-input clearable v-model="data.remark" placeholder="请输入备注内容" />
						</template>
					</vxe-form-item>

					<!-- 
					<vxe-form-item title="签订时间" field="time" span="6" :item-render="{}">
						<template #default="{ data }">
							<el-date-picker
								style="width: 100%"
								v-model="data.time"
								type="datetimerange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="YYYY-MM-DD HH:mm:ss"
							>
							</el-date-picker>
						</template>
					</vxe-form-item> -->

					<!-- 
					<vxe-form-item align="right" span="24" collapse-node>
						<template #default>
							<vxe-button status="primary" content="搜索" @click="searchEvent"></vxe-button>
							<vxe-button content="重置" @click="resetEvent"></vxe-button>
						</template>
					</vxe-form-item> -->
				</vxe-form>
			</div>
			<!-- 
			<vxe-toolbar ref="xToolbar" custom>
				<template #buttons>
					<vxe-button type="text" icon="fa fa-plus" content="新增" @click="addDefaultBlank"></vxe-button>
					<vxe-button type="text" icon="fa fa-trash-o" content="删除" @click="deleteTable"></vxe-button>
				</template>
				<template #tools>
					<vxe-button type="text" icon="vxe-icon--print" class="tool-btn" @click="printTab"></vxe-button>
					<vxe-button type="text" icon="vxe-icon--download" class="tool-btn" @click="funnelEvent"></vxe-button>
				</template>
			</vxe-toolbar> -->
			<!-- @edit-closed="editClosedEvent" -->
			<vxe-table
				:scroll-x="{ enabled: false }"
				:scroll-y="{ enabled: false }"
				class="mytable-style"
				:row-class-name="rowClassName"
				height="728"
				border
				align="center"
				keep-source
				ref="xTable1"
				:export-config="{}"
				resizable
				show-overflow
				:data="tableData"
				:edit-rules="validRules"
				:edit-config="{ trigger: 'manual', mode: 'row', icon: 'false' }"
				@checkbox-all="selectAllChangeEvent1"
				@checkbox-change="selectChangeEvent1"
				show-footer
				:footer-method="footerMethod"
			>
				<vxe-column align="center" type="checkbox" fixed="left" width="60"></vxe-column>
				<vxe-column align="center" type="seq" title="序号" width="60"></vxe-column>

				<vxe-column width="130" field="contractUnitId" title="合同单位" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-select clearable filterable v-model="scope.row.contractUnitId">
							<el-option v-for="item in selectFrom.unitsData" :key="item.id" :label="item.unitName" :value="item.id"></el-option>
						</el-select>
					</template>
					<template v-slot="{ row }">{{ getSelectLabel(row.contractUnitId, selectFrom.unitsData) }}</template>
				</vxe-column>
				<vxe-column width="130" field="contractName" title="合同名称" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>

				<vxe-column width="130" field="contractSubtotal" title="工程名称" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-input v-model="scope.row.contractSubtotal"></el-input>
					</template>
					<!-- <template v-slot="{ row }">{{ transitionNumber(row.supplementalAgreementMoney) }}</template> -->
				</vxe-column>

				<vxe-column width="90" field="engineeringTypeId" title="工程类别" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-select clearable filterable v-model="scope.row.engineeringTypeId">
							<el-option v-for="item in selectFrom.engineeringTypeIdData" :key="item.id" :label="item.type" :value="item.id"></el-option>
						</el-select>
					</template>
					<template v-slot="{ row }">{{ getSelectLabel_play(row.engineeringTypeId, selectFrom.engineeringTypeIdData) }}</template>
				</vxe-column>
				<vxe-column width="90" field="state" title="工程状态" :edit-render="{ name: '$select', options: selectFrom.stateData }"></vxe-column>

				<vxe-column width="100" field="contractMoney" title="合同金额" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-input v-model="scope.row.contractMoney">
							<!-- @change="chang_contractMoney(scope.row)" -->
						</el-input>
					</template>
					<template v-slot="{ row }">{{ transitionNumber(row.contractMoney) }}</template>
				</vxe-column>

				<vxe-column width="100" field="settleAccount" title="结算金额" :edit-render="{ name: 'input', attrs: { type: 'text' } }">
					<template v-slot="{ row }">{{ transitionNumber(row.settleAccount) }}</template>
				</vxe-column>

				<vxe-column width="100" field="managementFee" title="管理费%" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-input v-model="scope.row.managementFee" >
						</el-input>
					</template>
					<template v-slot="{ row }">{{ row.managementFee }}%</template>
				</vxe-column>

				<vxe-column width="100" field="supplementalAgreementMoney" title="所得税%" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-input v-model="scope.row.supplementalAgreementMoney">
							<!-- <template #append>%</template> -->
						</el-input>
						<!-- @change="chang_contractMoney(scope.row)" -->
					</template>
					<!-- {{ transitionNumber(row.engineeringContractMoney) }} -->
					<template v-slot="{ row }">{{ row.supplementalAgreementMoney }}%</template>
				</vxe-column>
				<vxe-column width="130" field="projectManagerId" title="项目经理" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-select clearable filterable v-model="scope.row.projectManagerId">
							<el-option v-for="item in selectFrom.projectManagerData" :key="item.id" :label="item.contactPerson" :value="item.id"></el-option>
						</el-select>
					</template>
					<template v-slot="{ row }">{{ getSelectLabel_contactPerson(row.projectManagerId, selectFrom.projectManagerData) }}</template>
				</vxe-column>
				<vxe-column width="100" field="partnerId" title="合作方" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-select clearable filterable v-model="scope.row.partnerId">
							<el-option v-for="item in selectFrom.hezuofang" :key="item.id" :label="item.unitName" :value="item.id"></el-option>
						</el-select>
					</template>
					<template v-slot="{ row }">{{ getSelectLabel(row.partnerId, selectFrom.hezuofang) }}</template>
				</vxe-column>
				<vxe-column width="100" field="marketEmployeeId" title="市场部员工" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-select clearable filterable v-model="scope.row.marketEmployeeId">
							<el-option v-for="item in selectFrom.projectManagerData" :key="item.id" :label="item.contactPerson" :value="item.id"></el-option>
						</el-select>
					</template>
					<template v-slot="{ row }">{{ getSelectLabel_contactPerson(row.marketEmployeeId, selectFrom.projectManagerData) }}</template>
				</vxe-column>

				<vxe-column
					width="105"
					field="startTime"
					title="开工时间"
					:edit-render="{ name: '$input', placeholder: '请选择日期', props: { type: 'date', placeholder: '请选择日期' } }"
				></vxe-column>

				<vxe-column
					width="105"
					field="endTime"
					title="竣工日期"
					:edit-render="{ name: '$input', placeholder: '请选择日期', props: { type: 'date', placeholder: '请选择日期' } }"
				></vxe-column>

				<vxe-column width="80" field="duration" title="工期" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>
				<vxe-column width="130" field="constructionSite" title="施工地点" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>

				<vxe-column width="80" field="warrantyPeriod" title="质保期" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>

				<vxe-column width="100" field="certificate" title="外经证编号" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>

				<vxe-column
					width="110"
					field="certificateExpiryTime"
					title="外经证到期日"
					:edit-render="{ name: '$input', placeholder: '请选择日期', props: { type: 'date', placeholder: '请选择日期' } }"
				></vxe-column>
				<vxe-column width="80" field="logout" title="是否注销" :edit-render="{ name: '$select', options: selectFrom.logoutData }"></vxe-column>

				<vxe-column width="130" field="associate" title="关联单位" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-select clearable filterable v-model="scope.row.associate">
							<el-option v-for="item in selectFrom.associatedUnit" :key="item.id" :label="item.unitName" :value="item.id"></el-option>
						</el-select>
					</template>
					<template v-slot="{ row }">{{ getSelectLabel(row.associate, selectFrom.associatedUnit) }}</template>
				</vxe-column>

				<vxe-column field="firstClassCommission" width="100" title="一类提成额" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-input v-model="scope.row.firstClassCommission" placeholder="请输入数值类型">
							<!-- <template #append>%</template> -->
						</el-input>
					</template>
					<template v-slot="{ row }">{{ row.firstClassCommission }}%</template>
				</vxe-column>

				<vxe-column field="secondClassCommission" width="100" title="二类提成额" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-input v-model="scope.row.secondClassCommission" placeholder="请输入数值类型">
							<!-- <template #append>%</template> -->
						</el-input>
					</template>
					<template v-slot="{ row }">{{ row.secondClassCommission }}%</template>
				</vxe-column>

				<vxe-column
					width="105"
					field="time"
					title="签订日期"
					:edit-render="{ name: '$input', placeholder: '请选择日期', props: { type: 'date', placeholder: '请选择日期' } }"
				></vxe-column>
				<vxe-column width="130" field="remark" title="备注" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>

				<!-- <vxe-column width="130" field="engineeringTypeId" title="合作方" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column> -->

				<!-- <vxe-column width="130" field="managementFee" title="管理费%" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column> -->

				<!-- <vxe-column field="logout" title="是否注销" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column> -->

				<!-- <vxe-column width="130" field="associate" title="关联单位" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column> -->

				<!-- <vxe-column
					width="130"
					field="firstClassCommission"
					title="一类提成额"
					:edit-render="{ name: 'input', attrs: { type: 'text' } }"
				></vxe-column> -->

				<!-- <vxe-column
					width="130"
					field="secondClassCommission"
					title="二类提成额"
					:edit-render="{ name: 'input', attrs: { type: 'text' } }"
				></vxe-column> -->

				<!-- <vxe-column width="130" field="certificateUrl" title="外经证附件" :edit-render="{ name: 'input', attrs: { type: 'text' } }"> </vxe-column> -->

				<vxe-column title="文件附件" fixed="right" width="100">
					<template #default="{ row }">
						<vxe-button status="primary" @click="openFileBtn(row)">文件列表</vxe-button>
						<!-- <vxe-button status="primary" @click="uploadingbutton(row)">上传文件</vxe-button> -->
						<!-- <vxe-button @click="download(row)">下载文件</vxe-button> -->
					</template>
				</vxe-column>
			</vxe-table>
		</el-card>

		<vxe-modal v-model="selectFrom.dialogProjectShow" title="工程类别" width="600" height="420" show-zoom resize remember>
			<template #default>
				<vxe-toolbar perfect>
					<template #buttons>
						<vxe-button icon="fa fa-plus" status="perfect" content="新增" @click="addbankShow"></vxe-button>
						<vxe-button icon="fa fa-trash-o" status="perfect" content="删除" @click="deleteTable_show"></vxe-button>
					</template>
				</vxe-toolbar>
				<vxe-table
					border
					:height="300"
					show-overflow
					ref="xTableShow"
					:data="selectFrom.engineeringTypeIdData"
					:edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
					@checkbox-all="selectAllChangeEvent1_show"
					@checkbox-change="selectChangeEvent1_show"
					@edit-closed="editClosedEvent_show"
				>
					<vxe-column type="checkbox" width="60" align="center"></vxe-column>
					<vxe-column type="seq" width="60" align="center"></vxe-column>
					<vxe-column field="type" title="工程类别" :edit-render="{ name: 'input' }"></vxe-column>
				</vxe-table>
			</template>
		</vxe-modal>

		<!-- 文件列表 -->
		<vxe-modal v-model="showFileList.isShow" title="文件列表" width="600" height="420" show-zoom resize remember>
			<template #default>
				<vxe-toolbar perfect>
					<template #buttons>
						<vxe-button icon="fa fa-plus" status="perfect" content="上传文件" @click="uploadingbutton()"></vxe-button>
						<!-- <vxe-button   status="primary" @click="uploadingbutton(row)">上传文件</vxe-button> -->
					</template>
				</vxe-toolbar>
				<vxe-table border :height="300" show-overflow ref="xTableShow" :data="showFileList.fileList">
					<vxe-column type="seq" width="60" align="center"></vxe-column>
					<vxe-column field="name" title="文件列表"></vxe-column>
					<vxe-column title="操作" fixed="right" align="center" width="230">
						<template #default="{ row }">
							<vxe-button status="primary" @click="download(row)">下载文件</vxe-button>
							<vxe-button @click="deleteFile(row)">删除文件</vxe-button>
						</template>
					</vxe-column>
				</vxe-table>
			</template>
		</vxe-modal>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, ref, toRaw, onMounted, nextTick } from 'vue';

import { ElMessage, ElMessageBox } from 'element-plus';
import {
	axios_SelList,
	axios_contractselList,
	axios_contractselListTop,
	axios_contractdel,
	axios_contractadd,
	axios_contractup,
	axios_categoryselList, //工程类别
	axios_categoryse_delete, //工程类别删除
	axios_categoryse_add, //工程类别新增
	axios_categoryse_up, //工程类别编辑
	axios_selValue_contractSubtotal, //计算计算合同金额小计
	axios_fileupload,
	axiosGetFileList, //获取文件列表
	axiosGetFiledel, //删除文件
} from '/@/api/basicsUrl/index';

import { GenNonDuplicateID } from '/@/utils/formatTime';
import { VXETable, VxeTablePropTypes } from 'vxe-table';
import { axios_excelcontract } from '/@/api/basicsUrl/index'; //通过单位查询项目
import { transitionNumber } from '/@/utils/transitionNumber';

export default {
	name: 'BusinessTicket',
	setup() {
		const xTable1 = ref({} as VxeTableInstance);
		const xToolbar = ref({} as VxeToolbarInstance);

		// 打印样式
		// 打印样式
		const printStyle = `
            .title {
              text-align: center;
            }
            .my-list-row {
              display: inline-block;
              width: 100%;
            }
            .my-list-col {
              float: left;
              width: 33.33%;
              height: 28px;
              line-height: 28px;
            }
            .my-top,
            .my-bottom {
              font-size: 12px;
            }
            .my-top {
              margin-bottom: 5px;
            }
            .my-bottom {
              margin-top: 30px;
              text-align: right;
            }
            `;

		// 打印顶部内容模板
		const topHtml = `
            <h1 class="title">出货单据</h1>
            <div class="my-top">
              <div class="my-list-row">
                <div class="my-list-col">商品名称： </div>
                <div class="my-list-col">发货单号：X2665847132654</div>
                <div class="my-list-col">发货日期：2020-09-20</div>
              </div>
              <div class="my-list-row">
                <div class="my-list-col">收货姓名： </div>
                <div class="my-list-col">收货地址：火星第七区18号001</div>
                <div class="my-list-col">联系电话：10086</div>
              </div>
            </div>
            `;

		// 打印底部内容模板
		const bottomHtml = `
            <div class="my-bottom">
              <div class="my-list-row">
                <div class="my-list-col"></div>
                <div class="my-list-col">创建人： </div>
                <div class="my-list-col">创建日期：2020-09-20</div>
              </div>
            </div>
            `;
		/**
		 * @Author: lilin_:）
		 * @name: 默认空白数组
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		let defaultBlankData = [
			{
				iswebAdd: true,
				webid: GenNonDuplicateID(),
				wayOfPayingId: '', //付款方式
				num: '',
				amount: '',
				ticketIssuanceTime: '',
				dueTime: '',
				ticketIssuingUnitId: '',
				ticketIssuingUnit: '',
				acceptanceUnitId: '',
				acceptanceUnit: '',
				paymentTime: '',
				receivingUnitId: 11,
				receivingUnit: '',
				wayOfPaying: '',
				intermediaryUnitId: '',
				intermediaryUnit: '',
				startTime: '',
				redemptionTime: '',
				interest: '',
				discountRate: '',
				invoiceBack: '',
				pictureUrl: '',
				remark: '',
				contractMoney: 0,
				engineeringContractMoney: '',
				supplementalAgreementMoney: '',
				contractSubtotal: '',
				settleAccount: 0, //结算金额
			},
		];

		let defaultShow = [
			{
				iswebAdd: true,
				webid: GenNonDuplicateID(),
				type: '', //工程类别
			},
		];

		const validRules = ref({
			time: [{ required: true, message: '签订日期必选' }],
			contractUnitId: [{ required: true, message: ' 合同单位必选' }],
			contractName: [{ required: true, message: '工程名称必选' }],
		} as VxeTablePropTypes.EditRules);

		const state: any = reactive({
			v1: 0, //合同台账：合同金额下面显示查询合计数
			addList: [], //前端加的数据
			responseData: [], //后端返回的数据

			// 文件列表
			showFileList: {
				isShow: false, //是否打开
				fileList: [], // 文件集合
				sasveFileItem: '', //存储数据对象
			},

			selectFrom: {
				contractUnitId: '', //单位id
				contractId: '', //项目id
				projectManagerId: '', //项目经理ID

				state: '', //状态状态ID 1施工中,2质保期中,3已结算
				stateData: [
					{ label: '施工中', value: '1' },
					{ label: '质保期中', value: '2' },
					{ label: '已结算', value: '3' },
				], //单位类型1供应商2客户3公司员工

				logout: '', //是否注销  1是 0否
				logoutData: [
					{ label: '是', value: '1' },
					{ label: '否', value: '0' },
				],
				time1: '', //时间
				time2: '', //时间
				on: 0, //默认是0，1是点击
				// ---------------------新增搜索内容
				// 新增内容搜索
				partnerId: '', // 合作方1
				marketEmployeeId: '', //市场部员工
				engineeringTypeId: '', // 工程类别
				contractName: '', //工程名称
				remark: '', // 备注
				// -----------------------------
				startMoney: '', //开始金额
				endMoney: '', //结束金额
				num: '', //汇编号码
				ticketIssuingUnitId: '', //出票单位ID
				// amount: '', //票面金额 14.55-15.55
				acceptanceUnitId: '', //承兑单位ID

				playData: [], //付款方式
				invoiceBack: '', //是否发票

				receivingUnitId: '', //收票单位ID
				intermediaryUnitId: '', //中介机构ID

				// type: '', //单位类型1供应商2客户3公司员工

				unitsData: [], //多数据
				projectData: [], //合同单位_工程名称
				projectManagerData: [], //项目经理 和市场部员工//
				associatedUnit: [], //关联单位
				hezuofang: [], //合作方数据远
				// 工程类别相关
				engineeringTypeIdData: [], //工程类别数据源
				// 工程类别type
				dialogProjectShow: false, //弹窗
				dialogProjectType: {
					selectData: [], //多选的数据
				},
			},
			tableData: [], //表格数据
			selecttableData: [], //多选
		});

		const selectAllChangeEvent1: VxeTableEvents.CheckboxAll = ({ checked, records }: any) => {
			console.log(checked ? '所有勾选事件' : '所有取消事件', records);
			state.selecttableData = records;
		};

		const selectChangeEvent1: VxeTableEvents.CheckboxChange = ({ checked, records }: any) => {
			state.tableData.forEach((item2: any) => {
				item2.hghligHt = false;
			});
			state.selecttableData = records;
			console.log(checked ? '勾选事件' : '取消事件', records);
			state.selecttableData.forEach((item: any) => {
				if (item.iswebAdd) {
					// 前端的数据
					state.tableData.forEach((item2: any) => {
						if (item.webid == item2.webid) {
							item2.hghligHt = true;
						}
					});
				} else {
					state.tableData.forEach((item2: any) => {
						if (item.id == item2.id) {
							item2.hghligHt = true;
						}
					});
				}
			});
		};

		//获取合作方数据
		const gethezuofang = async () => {
			let resData: any = await axios_SelList({ unitName: '', contactPerson: '', type: '4' });
			state.selectFrom.hezuofang = resData.obj;
			console.log(toRaw(resData.obj), '合作方的数据 啊');
		};

		/**
		 * @Author: lilin_:）
		 * @name: 通讯录接口
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const getProjectName = async () => {
			let resData: any = await axios_SelList({ unitName: '', contactPerson: '', type: '1,2,4' });
			state.selectFrom.unitsData = resData.obj;
			state.selectFrom.associatedUnit = resData.obj;
			console.log(toRaw(resData.obj), '11111111');
		};

		const getprojectManagerData = async () => {
			let resData: any = await axios_SelList({ unitName: '', contactPerson: '', type: '3' });
			state.selectFrom.projectManagerData = resData.obj;
			console.log(toRaw(resData.obj), '市场部员工');
		};
		// 关联单位
		// const getprojecassociatedUnit = async () => {
		// 	let resData: any = await axios_SelList({ unitName: '', contactPerson: '', type: '1,2,4' });
		// 	state.selectFrom.associatedUnit = resData.obj;
		// 	console.log(toRaw(resData.obj), '关联单位');
		// };

		// 查询所有项目
		const getAllProject = () => {
			axios_contractselListTop().then((res) => {
				state.selectFrom.projectData = res.obj;
				console.log(res, '查询所有项目');
			});
		};
		// // 新加搜索——合作方
		// const getpartnerIdArry = async () => {
		// 	let resData: any = await axios_SelList({ type: '4' });
		// 	state.selectFrom.partnerIdArry = resData.obj;
		// 	console.log(toRaw(resData.obj), '合作方数据');
		// };
		// // 市场部员工
		// const getmarketEmployeeIdArryd = async () => {
		// 	let resData: any = await axios_SelList({ type: '3' });
		// 	state.selectFrom.marketEmployeeIdArry = resData.obj;
		// 	console.log(toRaw(resData.obj), '市场部员工数据');
		// };

		// 搜索
		const searchEvent: VxeFormEvents.Submit = async () => {
			// VXETable.modal.message({ content: '查询事件', status: 'info' });
			state.selectFrom.on = 1;
			await gitTableList();
		};

		// 获取列表
		const gitTableList = () => {
			// let timeStr = '';
			// if (state.selectFrom.time) {
			// 	timeStr = `${state.selectFrom.time[0]}_${state.selectFrom.time[1]}`;
			// }

			let data = {
				time1: state.selectFrom.time1,
				time2: state.selectFrom.time2,
				on: state.selectFrom.on,
				contractUnitId: state.selectFrom.contractUnitId,
				contractId: state.selectFrom.contractId,
				projectManagerId: state.selectFrom.projectManagerId,
				state: state.selectFrom.state,
				logout: state.selectFrom.logout,
				// 新增搜索内容
				partnerId: state.selectFrom.partnerId, //合作方
				marketEmployeeId: state.selectFrom.marketEmployeeId, //市场部员工
				engineeringTypeId: state.selectFrom.engineeringTypeId, //工程类别
				contractName: state.selectFrom.contractName, //工程类别
				remark: state.selectFrom.remark, //备注
			};

			axios_contractselList(data).then((res: any) => {
				if (res.code == 200) {
					// 重置数据
					state.addList = [];
					// 添加20条数据
					for (let index = 0; index < 20; index++) {
						state.addList.push(
							defaultBlankData.map((item: any) => {
								return {
									...item,
									...{
										webid: GenNonDuplicateID(),
									},
								};
							})[0]
						);
					}
					// 存储数组索引
					state.responseData = res.obj;
					state.tableData = [...state.responseData, ...state.addList];
					state.selecttableData = [];
					state.v1 = res.data.v1;
				}
			});
		};

		/**
		 * @Author: lilin_:）
		 * @name: 重置搜索表单
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const resetEvent: VxeFormEvents.Reset = async () => {
			state.selectFrom.contractUnitId = '';
			state.selectFrom.contractId = '';
			state.selectFrom.projectManagerId = '';
			state.selectFrom.state = '';
			state.selectFrom.logout = '';
			state.selectFrom.time1 = '';
			state.selectFrom.time2 = '';
			state.selectFrom.on = 0;
			// 重置新的搜索
			state.selectFrom.partnerId = ''; //合作方
			state.selectFrom.marketEmployeeId = ''; //市场部员工
			state.selectFrom.engineeringTypeId = ''; //工程类别
			state.selectFrom.contractName = ''; //工程类别
			state.selectFrom.remark = ''; //备注

			await gitTableList();
			// VXETable.modal.message({ content: '重置事件', status: 'info' });
		};

		// 工程类别
		const getSelectData = () => {
			// 工程类别ID
			axios_categoryselList({}).then((res) => {
				if (res.code == 200) {
					state.selectFrom.engineeringTypeIdData = res.obj;
					console.log(res.obj, '工程类别ID');
				}
			});
		};

		onMounted(() => {
			// getpartnerIdArry(); //合作方
			// getmarketEmployeeIdArryd(); // 市场部员工
			// -----------新加入搜索
			getSelectData(); //工程类别
			getProjectName(); //单位名称
			getprojectManagerData(); //项目经理
			// getprojecassociatedUnit(); //关联单位
			getAllProject(); //查询所有项目
			gethezuofang(); //合作方数据
			gitTableList();

			// let a = GenNonDuplicateID()
			// console.log(a)
		});

		//实时更新
		const editClosedEvent: VxeTableEvents.EditClosed = ({ row, column }) => {
			console.log(toRaw(row), '11111');

			if (state.selecttableData.length == 1) {
				let row = state.selecttableData[0];

				if (row.iswebAdd) {
					// 走保存接口
					// console.log(toRaw(row), '我是前端提交');
					axios_contractadd(row).then((res) => {
						// console.log(res, '是否啊添加');
						if (res.code == 200) {
							state.selectFrom.on = 1;
							gitTableList();
							VXETable.modal.message({ content: '新增成功!', status: 'success' });
						}
					});
				} else {
					axios_contractup(row).then((res) => {
						if (res.code == 200) {
							state.selectFrom.on = 1;
							gitTableList();
							VXETable.modal.message({ content: '编辑成功！', status: 'success' });
						}
					});
					// console.log(toRaw(row), '我是后段提交');
				}
			} else if (state.selecttableData.length == 0) {
				VXETable.modal.message({ content: '您还没有选中行', status: 'warning' });
			} else {
				VXETable.modal.message({ content: '只能选中一行编辑', status: 'warning' });
			}

			// let getRow: any = row;
			// // console.log(toRaw(getRow, '111111111'));
			// axios_contactsAdd(getRow).then((res) => {
			// 	// console.log(res, '111111111');
			// 	if (res.code == 200) {
			// 		ElMessage.success({
			// 			message: `${res.msg}`,
			// 			type: 'success',
			// 		});
			// 	}
			// });
			// const $table = xTable1.value;
			// const field = column.property;
			// const cellValue = row[field];
			// 判断单元格值是否被修改;
			// if ($table.isUpdateByRow(row, field)) {
			// 	setTimeout(() => {
			// 		VXETable.modal.message({
			// 			content: `局部保存成功！ ${field}=${cellValue}`,
			// 			status: 'success',
			// 		});
			// 		// 局部更新单元格为已保存状态
			// 		$table.reloadRow(row, null, field);
			// 	}, 300);
			// }
		};

		/**
		 * @Author: lilin_:）
		 * @name: 关联表格
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		nextTick(() => {
			// 将表格和工具栏进行关联
			const $table = xTable1.value;
			const $toolbar = xToolbar.value;
			$table.connect($toolbar);
		});

		/**
		 * @Author: lilin_:）
		 * @name: 新增空白行
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const addDefaultBlank = () => {
			let addArry = defaultBlankData.map((item: any) => {
				return {
					...item,
					...{
						webid: GenNonDuplicateID(),
						hghligHt: true,
					},
				};
			});

			let row = addArry[0];
			// let showArry = JSON.parse(JSON.stringify(state.tableData)); // state.responseData.push(row);
			state.addList.unshift(row);
			state.tableData = [...state.responseData, ...state.addList];
			const $table = xTable1.value;
			$table.setActiveRow(row);
			$table.clearCheckboxRow();
			$table.toggleCheckboxRow(state.addList[0]); //默认选中第一行
			state.selecttableData = [state.addList[0]]; //拿到选择数据
			ElMessage.success({
				message: '新增1行空白栏',
				type: 'success',
			});
			// 计算滚动高度
			let heightpx = state.responseData.length * 40;
			setTimeout(() => {
				document.getElementsByClassName('vxe-table--body-wrapper')[0].scrollTo(0, heightpx);
			}, 100);
		};

		/**
		 * @Author: lilin_:）
		 * @name: 删除数据
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const deleteTable: any = async () => {
			let webAddArry: any = [];
			let reeData: any = [];
			state.selecttableData.forEach((item: any) => {
				if (item.iswebAdd == true) {
					webAddArry.push(item);
				} else {
					reeData.push(item);
				}
			});
			// 判断前端数据是否有值
			let webDelet = () => {
				if (webAddArry.length != 0) {
					// 前端删除
					state.addList = state.addList.filter((item: any) => {
						return !webAddArry.find((_item: any) => _item.webid === item.webid);
					});
					state.selecttableData = [];
					state.tableData = [...state.responseData, ...state.addList];
				}
			};

			let resDelet = async () => {
				if (reeData.length != 0) {
					let { code }: object = await axios_contractdel(
						reeData.map((item: any) => {
							return item.id;
						})
					);

					// console.log(code, '11111111');
					if (code == 200) {
						state.selectFrom.on = 1;
						gitTableList();
					}
				}
			};
			await resDelet();
			await webDelet();
		};

		/**
		 * @Author: lilin_:）
		 * @name: 高级导出功能
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const funnelEvent = () => {
			const $table = xTable1.value;
			$table.openExport();
		};

		/**
		 * @Author: lilin_:）
		 * @name: 打印表格
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const printTab = () => {
			const $table = xTable1.value;
			$table.print({
				sheetName: '打印合同台账',
				style: printStyle, //自定义样式
				columns: [
					{ field: 'time' },
					{ field: 'contractUnitId' },
					{ field: 'contractName' },
					{ field: 'projectManagerId' },
					{ field: 'contractMoney' },

					{ field: 'duration' },
					{ field: 'constructionSite' },
					{ field: 'marketEmployeeId' },

					{ field: 'engineeringTypeId' },

					{ field: 'partnerId' },

					{ field: 'managementFee' },

					{ field: 'startTime' },
					{ field: 'endTime' },
					{ field: 'warrantyPeriod' },
					{ field: 'engineeringContractMoney' },
					{ field: 'supplementalAgreementMoney' },

					{ field: 'contractSubtotal' },
					{ field: 'state' },

					{ field: 'certificate' },

					{ field: 'certificateExpiryTime' },
					{ field: 'certificateUrl' },
					{ field: 'logout' },

					{ field: 'associate' },
					{ field: 'firstClassCommission' },
					{ field: 'secondClassCommission' },
					{ field: 'remark' },
				],
				beforePrintMethod: ({ content }) => {
					// 拦截打印之前，返回自定义的 html 内容
					// return topHtml + content + bottomHtml;
					return content;
				},
			});
		};

		// 展示内容下拉搜索
		const getSelectLabel = (value, list) => {
			let item = list.find((item) => item.id == value);
			return item ? item.unitName : null;
		};
		// 关联关联单位下拉
		// const getSelectLabel_guanliandanw = (value, list) => {
		// 	let item = list.find((item) => item.id == value);
		// 	return item ? item.unitName : null;
		// };

		//付款方式
		const getSelectLabel_play = (value, list) => {
			let item = list.find((item) => item.id == value);
			return item ? item.type : null;
		};

		// 员工回显
		const getSelectLabel_contactPerson = (value, list) => {
			let item = list.find((item) => item.id == value);
			return item ? item.contactPerson : null;
		};
		// 计算
		let chang_contractMoney = (item: any) => {
			if (item.contractMoney != '' && item.supplementalAgreementMoney != '') {
				axios_selValue_contractSubtotal({
					contractMoney: item.contractMoney,
					supplementalAgreementMoney: item.engineeringContractMoney,
				}).then((res) => {
					if (res.code == 200) {
						if (item.iswebAdd) {
							// 前端的数据
							state.tableData.forEach((item_data, itemdata_index) => {
								if (item_data.webid == item.webid) {
									// console.log(itemdata_index,'itemdata_index')
									item_data.supplementalAgreementMoney = res.obj;
								}
							});
						} else {
							state.tableData.forEach((item_data, itemdata_index) => {
								if (item_data.id == item.id) {
									// console.log(itemdata_index,'itemdata_index')
									item_data.supplementalAgreementMoney = res.obj;
								}
							});
						}
					}
				});
			}
		};

		// 上传文件
		let uploadingbutton = async () => {
			// console.log(toRaw(item), 'item');
			let item: any = state.showFileList.sasveFileItem;
			try {
				const { files } = await VXETable.readFile({
					multiple: true,
				});
				// 数据表 1出纳表 2合同表 3商票台账
				let params = {
					dataSheet: 2,
					id: item.id,
				};
				let formData = new FormData();
				files.forEach((item) => {
					formData.append('files', item);
				});
				axios_fileupload(formData, params).then((res: any) => {
					if (res.code == 200) {
						state.selectFrom.on = 0;
						shuaxingFileListFun();
						VXETable.modal.alert(`共：${files.length} 个文件`);
					}
				});

				// 开始处理数据
			} catch (e) {
				ElMessage.error({
					message: '上传出错啦',
					type: 'error',
				});
			}
		};

		let download = (item: any) => {
			// console.log(toRaw(item), '11111111111111111111');

			if (!item.name) {
				ElMessage.error({
					message: '当前没有下载资源',
					type: 'error',
				});
				return;
			}

			// let pictureUrlArry = item.certificateUrl.split(',');
			// if (pictureUrlArry.length == 0) {
			// 	ElMessage.error({
			// 		message: '当前没有下载资源',
			// 		type: 'error',
			// 	});
			// 	return;
			// }

			let downloadFun = () => {
				// console.log(suffix,'suffix')
				let url = `${import.meta.env.VITE_API_URL}/file/download/${item.name}`;
				const x = new XMLHttpRequest();
				x.open('GET', url, true);
				x.responseType = 'blob';
				x.onload = function () {
					const url = window.URL.createObjectURL(x.response);
					const a = document.createElement('a');
					a.href = url;
					a.setAttribute('download', item.name);
					a.click();
				};
				x.send();
			};

			downloadFun();
		};

		// 删除文件
		let deleteFile = (item: any) => {
			console.log(item, '1111');
			// 提示
			ElMessageBox.confirm(`是否删除当前文件名称${item.name}`, '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					let resData = {
						name: item.name,
						id: state.showFileList.sasveFileItem.id,
						dataSheet: 2,
					};
					axiosGetFiledel(resData).then((res: any) => {
						// console.log(res, 'async');
						ElMessage({
							type: 'success',
							message: '删除成功',
						});
						shuaxingFileListFun();
					});
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: '取消删除',
					});
				});
		};

		// 刷新文件列表数据
		const shuaxingFileListFun = async () => {
			let { obj }: any = await axiosGetFileList({ dataSheet: 2, id: state.showFileList.sasveFileItem.id });
			state.showFileList.fileList = obj.map((item: any) => {
				return {
					name: item,
				};
			});
		};

		//  新增工程类别
		const showEngineeringType = async () => {
			await getSelectData();
			state.selectFrom.dialogProjectShow = true;
		};

		const selectAllChangeEvent1_show: VxeTableEvents.CheckboxAll = ({ checked, records }: any) => {
			console.log(checked ? '所有勾选事件' : '所有取消事件', records);
			state.selectFrom.dialogProjectType.selectData = records;
		};

		const selectChangeEvent1_show: VxeTableEvents.CheckboxChange = ({ checked, records }: any) => {
			state.selectFrom.dialogProjectType.selectData = records;
			console.log(checked ? '勾选事件' : '取消事件', records);
		};
		//实时更新弹窗
		const editClosedEvent_show: VxeTableEvents.EditClosed = ({ row, column }) => {
			// let getRow: any = row;
			if (row.iswebAdd) {
				// 走保存接口
				axios_categoryse_add(row).then((res) => {
					if (res.code == 200) {
						getSelectData();
					}
				});
			} else {
				axios_categoryse_up(row).then((res) => {
					if (res.code == 200) {
						getSelectData();
					}
				});
			}
		};
		// 添加弹窗
		const addbankShow = () => {
			let addArry = defaultShow.map((item: any) => {
				return {
					...item,
					...{
						webid: GenNonDuplicateID(),
					},
				};
			});
			state.selectFrom.engineeringTypeIdData = JSON.parse(JSON.stringify([...state.selectFrom.engineeringTypeIdData, ...addArry]));
			// console.log(toRaw(state.tableData), '11111111111');
			ElMessage.success({
				message: '新增1行空白栏',
				type: 'success',
			});
		};

		// 弹窗删除
		const deleteTable_show: any = async () => {
			let webAddArry: any = [];
			let reeData: any = [];
			state.selectFrom.dialogProjectType.selectData.forEach((item: any) => {
				if (item.iswebAdd == true) {
					webAddArry.push(item);
				} else {
					reeData.push(item);
				}
			});
			// 判断前端数据是否有值
			let webDelet = () => {
				if (webAddArry.length != 0) {
					// 前端删除
					state.selectFrom.engineeringTypeIdData = state.selectFrom.engineeringTypeIdData.filter((item: any) => {
						return !webAddArry.find((_item: any) => _item.webid === item.webid);
					});
				}
			};

			let resDelet = async () => {
				if (reeData.length != 0) {
					let { code }: object = await axios_categoryse_delete(
						reeData.map((item: any) => {
							return item.id;
						})
					);
					// console.log(code, '11111111');
					if (code == 200) {
						getSelectData();
					}
				}
			};
			await resDelet();
			await webDelet();
		};

		// 上传文件
		let uploadingbutton_ADD = async (item: any) => {
			console.log(toRaw(item), 'item');
			try {
				const { file } = await VXETable.readFile({
					multiple: true,
				}); // 数据表 1出纳表 2合同表 3商票台账
				// let params = {
				// 	dataSheet: 3,
				// 	id: item.id,
				// };
				console.log(file, 'file');
				let formData = new FormData();
				formData.append('file', file);
				// files.forEach((item) => {
				// 	formData.append('files', item);
				// });
				axios_excelcontract(formData).then((res: any) => {
					if (res.code == 200) {
						state.selectFrom.on = 1; // //默认是0，1是点击
						gitTableList();
						VXETable.modal.alert(`共：1 个文件`);
					}
				}); // 开始处理数据
			} catch (e) {
				ElMessage.error({
					message: '上传出错啦',
					type: 'error',
				});
			}
		};

		//打开文件列表
		const openFileBtn = async (item: any) => {
			state.showFileList.sasveFileItem = item;
			let { code, obj }: any = await axiosGetFileList({ dataSheet: 2, id: item.id });
			if (code == 200) {
				state.showFileList.isShow = true;
				state.showFileList.fileList = obj.map((item: any) => {
					return {
						name: item,
					};
				});
			}

			// 获取数据
		};

		const showAmendFun = () => {
			if (state.selecttableData.length == 1) {
				let row = state.selecttableData[0];
				row.hghligHt = true;
				const $table = xTable1.value;
				$table.setActiveRow(row);
			} else if (state.selecttableData.length == 0) {
				VXETable.modal.message({ content: '您还没有选中行', status: 'warning' });
			} else {
				VXETable.modal.message({ content: '只能选中一行编辑', status: 'warning' });
			}
		};

		// 改变颜色样式
		const rowClassName: VxeTablePropTypes.RowClassName = ({ row }) => {
			// console.log(row, 'rowIndex');
			if (row.hghligHt) {
				return 'row-green';
			}
			return null;
		};

		const footerMethod: VxeTablePropTypes.FooterMethod = ({ columns, data }) => {
			return [
				columns.map((column, columnIndex) => {
					// console.log(columnIndex, '1');
					// if (columnIndex === 5) {
					// 	return `合计`;
					// }
					if (columnIndex === 7) {
						return `${state.v1}`;
					}
					return '';
				}),
			];
		};

		return {
			validRules,
			showAmendFun, //编辑
			openFileBtn, //上传图片
			uploadingbutton_ADD, //上传
			showEngineeringType, //工程类别弹窗
			selectAllChangeEvent1_show, //勾选全部
			selectChangeEvent1_show, //勾选全部
			editClosedEvent_show, //实时更新
			deleteTable_show, //弹窗删除
			addbankShow, //弹窗新增
			// 上面是弹窗的东西
			...toRefs(state),
			editClosedEvent, //实时更新
			xToolbar, //关联表格
			xTable1, //表格
			addDefaultBlank, //新增空白行
			deleteTable, //删除数据
			funnelEvent, //导出数据
			printTab, //打印
			getSelectLabel, //展示搜索下拉
			getSelectLabel_play, //付出方式
			getSelectLabel_contactPerson, //员工
			chang_contractMoney, //计算计算合同金额小计
			selectAllChangeEvent1,
			selectChangeEvent1,
			input: ref(''),
			searchEvent,
			resetEvent,
			uploadingbutton, //上传下载
			download, //下载
			deleteFile, //删除
			transitionNumber,
			rowClassName,
			footerMethod,
		};
	},
};
</script>

<style scoped lang="scss">
.mytable-style ::v-deep .vxe-body--row.row-green {
	background-color: #bbb;
	color: #fff;
}
</style>
